require('../css/register.css');

//导入sxios
const axios = require('../utils/http.js');

window.addEventListener('load', function () {

    let canvas = document.querySelector('#captcha1');
    let tell_inp = document.querySelector('.tell_inp');
    let code = document.querySelector('.code');
    let pwd_inp = document.querySelector('.pwd_inp');
    let pwd2_inp = document.querySelector('.pwd2_inp');
    let btn = this.document.querySelector('.btn');

    //验证码 配合三方库使用
    let yzmCode = '';
    let captcha1 = new CaptchaMini();
    captcha1.draw(canvas, res => {
        console.log(res, '验证码1');
        yzmCode = res;
    });


    //页面跳转
    let pwd_login = document.querySelector('.pwd_login');
    pwd_login.addEventListener('click', () => {
        location.href = './login.html';
    })





    //正则
    tell_inp.addEventListener('blur', () => {
        let reg = /^1[3-9]\d{9}$/;
        if (!(reg.test(tell_inp.value))) {
            tell_inp.style.border = '0.1rem solid red';
            utils.toast(1,'请输入正确手机号');
        }
    })
    tell_inp.addEventListener('focus', () => {
        let reg = /^1[3-9]\d{9}$/;
        if (!(reg.test(tell_inp.value))) {
            tell_inp.style.border = 'none';
        }
    })

    //一致性验证
    code.addEventListener('blur', () => {
        //toLowerCase()转小写
        if (code.value.toLowerCase() !== yzmCode.toLowerCase()) {
            code.style.border = '0.1rem solid red'
            utils.toast(1,'请输入正确验证码');
            
        }
    })
    code.addEventListener('focus', () => {
        if (code.value.toLowerCase() !== yzmCode.toLowerCase()) {
            code.style.border = 'none';
        }
    })
    //密码框验证
    pwd2_inp.addEventListener('blur', () => {
        if (pwd_inp.value !== pwd2_inp.value) {
            pwd2_inp.style.border = '0.1rem solid red';
            pwd_inp.style.border = '0.1rem solid red';
            utils.toast(1,'请输入正确密码');
            
        }
    })

    pwd2_inp.addEventListener('focus', () => {
        if (pwd_inp.value !== pwd2_inp.value) {
            pwd2_inp.style.border = 'none';
        }
    })
    pwd_inp.addEventListener('focus', () => {
        if (pwd_inp.vaiue !== pwd2_inp.value) {
            pwd_inp.style.border = 'none';
        }
    })

    //非空
    btn.addEventListener('click', () => {
        if (!tell_inp.value || !code.value || !pwd_inp.value || !pwd2_inp.value) {
            // this.alert('请将信息输入完整')
            utils.toast(1,'请将信息输入完整');
            
        } else {
            //验证通过发送axios请求
            let data = {
                account: tell_inp.value,
                password: pwd_inp.value
            }
            console.log(data);

            axios.post('/api/user/register', data).then(res => {
                if (res.data.errno == 0) {
                    // alert('注册成功');
                    utils.toast(0,'注册成功');
                    
                    location.href = './login.html';
                } else {
                    // alert(res.data.message)
                    utils.toast(1,res.data.message);
                    
                }
            })
        }
    })














})




